<template>
  <!-- 题干 -->
  <div class="info">
    <div class="numblock">
      {{ props.order + 1 }}
    </div>
    （{{ question.题型 }}）
    <i title="删除此题目" class="iconfont icon-shanchu"></i>
  </div>
  <span class="queStem" v-html="cleanQuestionsItem"></span>
  <!-- '单选题', '多选题' -->
  <div class="ChoiceQue" v-if="['单选题', '多选题'].includes(question.题型)">
    <div class="option" v-for="(option, index) in cleanOptions" :key="index">
      <input :type="question.题型 === '单选题' ? 'radio' : 'checkbox'" :name="props.order" />
      <div class="cover">
        <span class="letter">{{ String.fromCharCode(65 + index) }}</span>
        <span v-html="option"></span>
      </div>
    </div>
  </div>
  <!-- '排序题' -->
  <div class="SortQue" v-if="question.题型 === '排序题'">
    <VueDraggable
      v-model="SortItems"
      :animation="150"
      ghostClass="ghost"
      class="SortBox flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
    >
      <div
        v-for="item in SortItems"
        :key="item.id"
        class="sortItem cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        <div class="wrap">
          <div class="OrderNum">{{ item.id }}</div>
          <div class="DividerLine"></div>
          {{ item.name }}
        </div>
      </div>
    </VueDraggable>
  </div>
  <!-- question.题型 === '单选题' || '多选题' ❌-->
</template>

<script setup>
import { ref } from 'vue'
import DOMPurify from 'dompurify'
import { VueDraggable } from 'vue-draggable-plus'

const props = defineProps({
  question: Object,
  order: Number,
})

const question = props.question
const cleanQuestionsItem = DOMPurify.sanitize(question.题干)
const cleanOptions = question.选项 && question.选项.map((item) => DOMPurify.sanitize(item))
const SortItems = ref(question.顺序 && question.顺序)
</script>

<style lang="less" scoped>
.info {
  display: flex;
  align-items: center;
  .numblock {
    min-width: 26px;
    height: 26px;
    background-color: rgb(0, 177, 247);
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    color: white;
    line-height: 26px;
    font-weight: bold;
    font-size: 20px;
  }
}
.queStem ::v-deep p {
  padding: 5px 0 !important;
}
.ChoiceQue {
  .option {
    display: flex;
    position: relative;
    &:nth-child(n + 2) {
      margin-top: 3px;
    }
    input {
      appearance: none;
      width: 100%;
      border: solid 2px rgb(126, 126, 126);
      min-height: 41px;
      border-radius: 8px;
      margin: 0;
      &:checked {
        background: linear-gradient(
          170deg,
          rgb(193, 234, 250),
          rgb(139, 222, 255),
          rgb(167, 226, 249)
        );
        border: solid 2px rgb(109, 192, 255);
      }
    }
    .cover {
      position: absolute;
      pointer-events: none;
      height: 100%;
      padding: 7px;
      width: 100%;
      display: flex;
      align-items: center;
      .letter {
        width: 23px;
        height: 100%;
        padding: 7px 7px 7px 4px;
        border-right: solid rgb(173, 180, 183) 1px;
        align-items: center;
        display: flex;
        margin-right: 6px;
      }
    }
  }
}
.SortQue {
  .SortBox {
    width: max-content;
    .sortItem {
      min-height: 40px;
      padding: 4px 6px;
      font-size: 18px;
      border: solid 2px rgb(16, 200, 229);
      background: linear-gradient(
        170deg,
        rgb(193, 246, 250),
        rgb(127, 236, 242),
        rgb(167, 243, 249)
      );
      align-items: center;
      border-radius: 8px;
      &:nth-child(n + 2) {
        margin-top: 4px;
      }
      .wrap {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
        .OrderNum {
          border-radius: 50%;
          border: 2px solid rgb(0, 104, 106);
          color: rgb(0, 104, 106);
          width: 25px;
          height: 25px;
          text-align: center;
          line-height: 21.3px;
          margin-right: 10px;
        }
        .DividerLine {
          height: 100%;
          border: 1px solid rgb(45, 204, 207);
          position: absolute;
          left: 29px;
        }
      }
    }
  }
}
</style>